  //创建一个用数据渲染页面的方法
  let renderfn = function(data) {
      $('.tr_row').remove();
      data.forEach(item => {
          let html =
              `
                <tr class="tr_row">
                    <td>
                        <input type="text" name="id" value=${item.id}> 
                    </td>
                    <td>
                        <input type="text" name="name" value=${item.name}> 
                    </td>
                    <td>
                        <input type="text" name="name" value=${item.price}> 
                    </td>
                    <td>
                        <input type="button" value="删除" onclick="deleted(${item.id})">
                        <input type="button" value="修改" onclick="endit(${item.id})">
                    </td>
                </tr> 
            `
          $('#data_table').append(html);
      });
  };

  //显示数据
  $(function() {
      getproduceList().then(data => {
          renderfn(data)
      })
  })

  //查找
  function query() {
      let keyword = $('#keyword').val();
      //这里和后端都要判断，这个是判断是否为空，后端判断是查找还是展示所有数据，前端可以不用但后端必须用
      queryproductbykeyword(keyword).then(data => {
          renderfn(data)
      })
  }

  //删除
  function deleted(id) {
      delproductById(id).then((data) => {
          renderfn(data)
      })
  }

  //新增
  function add() {
      window.location.href = 'addOrendit.html';
  }

  //修改
  function endit(id) {
      enditproductById(id).then(data => {
          window.location.href = `addOrendit.html?${data[0]["id"]}`
      })
  }

  //保存
  function save() {
      let id = $('[name=id]').val();
      let name = $('[name=name]').val();
      let price = $('[name=price]').val();
      let obj = {
              id,
              name,
              price
          }
          //判断是新增还是修改
      if (!id) {
          addproduct(obj).then(() => {
              window.location.href = 'info.html'; //这里的都不要去渲染，没用，第一，渲染了不跳转你看不到，渲染了，跳转了又被重新渲染了
          })
      } else {
          updateproduct(obj).then(() => {
              window.location.href = 'info.html'; // 所以我后端直接返回200即可
          })
      }
  }

  //取消保存
  function cancal() {
      window.location.href = 'info.html';
  }
  /*
  注意：
  1 只有查找是可以从后天返回数据的，所以直接调用rendfn，
  而其他是后台直接增删改，所以要完整调用请求所有数据以及rendfn 即跳转info.html
  2 尽量和mvc保持一致使用rendfn函数，而不去window.location.href = 'info.html'，
  这就要求前端的promise都要接收data数据。
  但注意二者的不同，后者隐含了一个remove功能，把界面都重新加载了而前者不会，
  好在$('aa').remove若aa不存在也不会报错，所以就把remove放在渲染函数的第一步执行
  */